<!DOCTYPE html>
<html>
    <head>
        <title>a test for myself</title>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>

        <div id="app-2">
            <span v-bind:title="message">
              鼠标悬停几秒钟查看此处动态绑定的提示信息！
            </span>
          </div>

          <div id="app-3">
            <p v-if="seen">now you see me</p>
          </div>

          <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
          </div>

          <div id="app-5">
            <p>{{message}}</p>
            <button v-on:click="reverseMessage">反转消息</button>
          </div>

          <div id="app-6">
            <p>{{message}}</p>
            <input v-model="message">
          </div>

          <div id = "app-7">
            <ol>
                <!--
                现在我们为每个 todo-item 提供 todo 对象
                todo 对象是变量，即其内容可以是动态的。
                我们也需要为每个组件提供一个“key”，稍后再
                作详细解释。
                -->
                <todo-item v-for="item in grocerylist" 
                    v-bind:todo="item" v-bind:key="item.id">
                </todo-item>
            </ol>
          </div>

          <div id = "app-8">
            <p>{{foo}}</p>
            <!-- 这里的 `foo` 不会更新！ -->
                <button v-on:click="foo = 'baz'">Change it</button>
          </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:'hello vue'
                }
            })

            var app2 = new Vue({
                el:'#app-2',
                data:{
                    message:'页面加载于 ' + new Date().toLocaleString()
                }
            })

            var app3 = new Vue({
                el:"#app-3",
                data:{
                    seen:true
                }
            })

            var app4 = new Vue({
                el:"#app-4",
                data:{
                    todos:[
                        {text:'学习 JavaScript'},
                        {text:'学习 Vue'},
                        { text: '整个牛项目' }
                    ]
                }
            })

            var app5 = new Vue({
                el:"#app-5",
                data:{
                    message:"hello my honey"
                },
                methods:{
                    reverseMessage:function(){
                        this.message = this.message.split(' ').reverse().join(' ')
                    }
                }
            })

            var app6 = new Vue({
                el:"#app-6",
                data:{
                    message:"gigi"
                },
            })


            Vue.component('todo-item', {
                props: ['todo'],
                template: '<li>{{ todo.text }}</li>'
            })

            var app7 = new Vue({
                el:"#app-7",
                data:{
                    "grocerylist":[
                    { id: 0, text: '蔬菜' },
                    { id: 1, text: '奶酪' },
                    { id: 2, text: '随便其它什么人吃的东西' }
                    ]
                }
            })

            var obj1000000001 = {
                foo:"bar"
            }

            // Object.freeze(obj1000000001)

            var app8 = new Vue({
                el:"#app-8",
                data:obj1000000001
            })
        </script>
    </body>
</html>